<script setup>
import { useTheme } from '../assets/theme.js';
import { setColorTheme } from '../assets/theme.js';

const { isDark, currentTheme, getColor } = useTheme();

function switchTheme(theme) {
  setColorTheme(theme);
}
</script>

<template>
  <div :class="`p-6 rounded-lg border ${getColor('interface.divider').value} ${getColor('interface.primary').value}`">
    <h2 :class="`text-xl font-bold mb-4 ${getColor('text.primary').value}`">主题测试组件</h2>
    
    <div class="mb-4">
      <p :class="`mb-2 ${getColor('text.secondary').value}`">当前主题: {{ currentTheme.value }}</p>
      <p :class="`mb-2 ${getColor('text.secondary').value}`">是否为暗色模式: {{ isDark.value ? '是' : '否' }}</p>
    </div>
    
    <div class="flex gap-2 mb-4">
      <button 
        :class="`px-4 py-2 rounded ${getColor('interactive.hover').value} ${getColor('text.primary').value}`"
        @click="switchTheme('light')"
      >
        浅色主题
      </button>
      <button 
        :class="`px-4 py-2 rounded ${getColor('interactive.hover').value} ${getColor('text.primary').value}`"
        @click="switchTheme('dark')"
      >
        深色主题
      </button>
      <button 
        :class="`px-4 py-2 rounded ${getColor('interactive.hover').value} ${getColor('text.primary').value}`"
        @click="switchTheme('system')"
      >
        跟随系统
      </button>
    </div>
    
    <div :class="`p-4 rounded border ${getColor('interface.divider').value} ${getColor('interface.secondary').value}`">
      <p :class="`${getColor('text.primary').value} mb-2`">这是一个测试区域</p>
      <p :class="`${getColor('text.secondary').value} mb-2`">次要文本颜色</p>
      <p :class="`${getColor('text.muted').value}`">静音文本颜色</p>
      
      <div class="mt-4">
        <button :class="`px-3 py-1 rounded mr-2 ${getColor('interactive.hover').value}`">悬停按钮</button>
        <button :class="`px-3 py-1 rounded ${getColor('interactive.danger').value}`">危险按钮</button>
      </div>
    </div>
  </div>
</template>